<template>
    <view class="tabs">
      <scroll-view scroll-x class="bg-green nav text-center">
      	<view class="cu-item" :class="0==TabCur?'text-red cur':''" @tap="tabSelect" data-id="0">
      		<text class="cuIcon-camerafill"></text> 效果图
      	</view>
      	<view class="cu-item" :class="1==TabCur?'text-red cur':''" @tap="tabSelect" data-id="1">
      		<text class="cuIcon-upstagefill"></text> 户型图
      	</view>
      	<view class="cu-item" :class="2==TabCur?'text-red cur':''" @tap="tabSelect" data-id="2">
      		<text class="cuIcon-clothesfill"></text> 样板间图
      	</view>
		<view class="cu-item" :class="3==TabCur?'text-red cur':''" @tap="tabSelect" data-id="3">
			<text class="cuIcon-clothesfill"></text> 周边图
		</view>
      </scroll-view>
	
	  <view  v-if="0==TabCur" class="cu-list grid col-2 no-border">
	  	<view v-for="(thumb_url,index) in thumb_urls" :key="index"  class="padding-sm radius" style="position:relative;">
	  		 <image mode="aspectFit"  class="radius" :src="thumb_url" :data-index="index" :data-srcs="thumb_urls"  @tap="preImage"></image>
			 <text class="cuIcon-same bg-blue text-white padding-sm" style="position: absolute;right:15px;bottom:20px;padding:3px;"></text>
	  	</view>
	  </view>
	  <view  v-if="1==TabCur" class="cu-list grid col-2 no-border">
	  	<view v-for="(thumb_1,index) in thumb_1s" :key="index"  class="padding-sm radius" style="position:relative;">
	  		 <image mode="aspectFit"  class="radius" :src="thumb_1" :data-index="index" :data-srcs="thumb_1s"  @tap="preImage"></image>
	  		 <text class="cuIcon-same bg-blue text-white padding-sm" style="position: absolute;right:15px;bottom:20px;padding:3px;"></text>
	  	</view>
	  </view>
	  <view  v-if="2==TabCur" class="cu-list grid col-2 no-border">
	  	<view v-for="(thumb_2,index) in thumb_2s" :key="index"  class="padding-sm radius" style="position:relative;">
	  		 <image mode="aspectFit"  class="radius" :src="thumb_2"  :data-index="index" :data-srcs="thumb_2s"  @tap="preImage"></image>
	  		 <text class="cuIcon-same bg-blue text-white padding-sm" style="position: absolute;right:15px;bottom:20px;padding:3px;"></text>
	  	</view>
	  </view>
	  <view  v-if="3==TabCur" class="cu-list grid col-2 no-border">
	  	<view v-for="(thumb_3,index) in thumb_3s" :key="index"  class="padding-sm radius" style="position:relative;">
	  		 <image mode="aspectFit"  class="radius" :src="thumb_3" :data-index="index" :data-srcs="thumb_3s"  @tap="preImage"></image>
	  		 <text class="cuIcon-same bg-blue text-white padding-sm" style="position: absolute;right:15px;bottom:20px;padding:3px;"></text>
	  	</view>
	  </view>
	 
      
    </view>
</template>
<script>
    export default {
        
        data() {
				return {
					TabCur: 0,
					scrollLeft: 0,
					thumb_urls:[],
					thumb_1s:[],
					thumb_2s:[],
					thumb_3s:[],
					imgRoot:this.$rootUrl,
					oldImgRoot:'http://wx.attch.we.qsace.com/'
				};
			},
        onLoad(e) {
			var me=this;
			debugger;
			if(e.thumb_url!=""&&e.thumb_url!="null"){
				e.thumb_url.split(",").forEach(function(item){
					item=(item.indexOf('Attachment')!=-1?me.imgRoot:me.oldImgRoot)+item;
					me.thumb_urls.push(item);
				})
			}
			if(e.thumb_1!=""&&e.thumb_1!="null"){
				e.thumb_1.split(",").forEach(function(item){
					item=(item.indexOf('Attachment')!=-1?me.imgRoot:me.oldImgRoot)+item;
					me.thumb_1s.push(item);
				});
			}
			if(e.thumb_2!=""&&e.thumb_2!="null"){
				e.thumb_2.split(",").forEach(function(item){
					item=(item.indexOf('Attachment')!=-1?me.imgRoot:me.oldImgRoot)+item;
					me.thumb_2s.push(item);
				});
			}
			if(e.thumb_3!=""&&e.thumb_3!="null"){
				e.thumb_3.split(",").forEach(function(item){
					item=(item.indexOf('Attachment')!=-1?me.imgRoot:me.oldImgRoot)+item;
					me.thumb_3s.push(item);
				});
			}
			
        },
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
        methods: {
            tabSelect(e) {
            	this.TabCur = e.currentTarget.dataset.id;
            	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            },
			preImage(e){
				 // 预览图片
				uni.previewImage({
					urls: e.currentTarget.dataset.srcs,
					current:e.currentTarget.dataset.index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
        }
    }
</script>

<style lang="scss">
  
image{
	height:150px;
}
</style>
